<html>

<head>
<title>Calendar demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/Calendar.js"></script>
</head>

<body>

<div id="frame">
</div>

<script type="text/javascript">

var renderer = {
	firstDay: 1, 
	orientation: 1, 
	renderDate: function(input, index, calendar)
	{
		var el = document.createTextNode(input || '\x20');
		var td = document.createElement('td');
		td.appendChild(el);
		return td;
	},
	renderWeek: function(input, index, calendar)
	{
		var text = document.createTextNode(weekList[input]);
		var td = document.createElement('td');
		td.className = 'week';
		td.appendChild(text);
		return td;
	},
	renderMonth: function(input, calendar)
	{
		var text = document.createTextNode(monthList[input] + ' - ' + calendar.year);
		var caption = document.createElement('caption');
		caption.appendChild(text);
		return caption;
	},
	renderRow: function(input, calendar)
	{
		var tr = document.createElement('tr');
		for (var i = 0; i < input.length; i++) {
			tr.appendChild(input[i]);
		}
		return tr;
	},
	renderCalendar: function(input, calendar)
	{
		var tbody = document.createElement('tbody');
		for (var i = 1; i < input.length; i++) {
			tbody.appendChild(input[i]);
		}
		var table = document.createElement('table');
		table.className = 'calendar';
		table.appendChild(input[0]);
		table.appendChild(tbody);
		return table;
	}
};

var weekList = 'Sun Mon Tue Wed Thu Fri Sat'.split(/\s+/);
var monthList = 'January February March April May June July August September October November December'.split(/\s+/);

var cal = new Calendar();

// Render vertically and with Monday as the first day of a week
var date = new Date();
var result = cal.render(date, renderer);

document.getElementById('frame').appendChild(result);

</script>

</body>
</html>